<header mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
    <h4 style="pointer-events: none;">Create a New Notification Destination</h4>
</header>

<div mat-dialog-content>
    <mat-horizontal-stepper [linear]="true" #stepper>
        <mat-step [stepControl]="typeFormGroup" >
            <form [formGroup]="typeFormGroup">
                <ng-template matStepLabel>Type Selection</ng-template>

                <mat-selection-list formControlName="type" class="pac-connection-creation__type-selection" disableRipple [multiple]="false"
                    (selectionChange)="stepper.next()">
                    <mat-list-option *ngFor="let item of destinationTypes$ | async" [value]="item">
                        <div fxLayout="row" fxLayoutAlign="space-between center" >
                            <span>
                                <img src="{{IMG_ROOT}}/{{item.type}}.png" width="32" height="32">
                                {{item.name}}
                            </span>
                            <mat-icon>navigate_next</mat-icon>
                        </div>
                    </mat-list-option>
                </mat-selection-list>
            </form>
        </mat-step>

        <mat-step [stepControl]="configurationFormGroup" label="Configuration">
            <form [formGroup]="configurationFormGroup" *ngIf="type" class="pac-connection-creation__configuration">
                <div class="pac-connection-creation__configuration-content">
                    <div fxLayout="row" fxLayoutAlign="center center" >
                        <img src="{{IMG_ROOT}}/{{type.type}}.png" width="64" height="64">
                        {{type.name}}
                    </div>
                    
                    <mat-form-field appearance="fill">
                        <mat-label>Name</mat-label>
                        <input matInput formControlName="name" required>
                        <mat-error *ngIf="nameCtrl.invalid">Name required</mat-error>
                    </mat-form-field>

                    <formly-form
                        [form]="options"
                        [fields]="fields$ | async"
                        [model]="model"
                        >
                    </formly-form>
                </div>
            </form>
        </mat-step>

    </mat-horizontal-stepper>
</div>

<div mat-dialog-actions fxLayout="row" fxLayoutAlign="space-between center">

    <button mat-stroked-button [disabled]="configurationFormGroup.pristine" (click)="onReset()">Reset</button>

    <div>
        <button mat-button mat-dialog-close cdkFocusInitial>Cancel</button>

        <button mat-raised-button color="accent"
            [disabled]="configurationFormGroup.invalid || creating"
            (click)="onSave()">Save</button>
    </div>
    
</div>